<template>
    <el-container class = "home-container">
        <!-- 头部区域 -->
        <el-header>
            <div>
                <img alt = "" height = "40" src = "@/assets/head.jpeg" style = "border-radius: 50%" width = "40">
                <span>电商后台管理系统</span>
            </div>
            <el-button icon = "el-icon-switch-button" size = "mini" type = "danger" @click = "logout">退出</el-button>
        </el-header>
        <!-- 主体区域 -->
        <el-container>
            <!-- 侧边栏 -->
            <el-aside :width = "isCollapse ? '64px':'200px'">
                <!-- 导航菜单 -->
                <Mymenu @collapse = "collapse"></Mymenu>
            </el-aside>
            <!-- 右侧区域 -->
            <el-main>
                <!-- 面包屑 -->
                <!-- <Breade></Breade> -->
                <!-- tag标签 -->
                <!-- <Tags></Tags> -->
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>
<script>
import Mymenu from '@/components/Menu.vue';
// import Tags from '@/components/Tags.vue';
export default {
    name: "Ho-me",
    components: {Mymenu},
    data () {
        return {
            isCollapse: false,
            property: 'value',
        };
    },
    methods: {
        /**
         * @name
         * @退出登录
         */
        logout () {
            this.$confirm("是否退出登录?", '提示', {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "info"
            }).then(() => {
                // 清空 缓存
                window.sessionStorage.clear();
                this.$store.commit('clearState');
                this.$router.push("/login");
            }).catch(err => err);
        },
        // 接收菜单组件的数据
        collapse (data) {
            this.isCollapse = data;
        }
    }
}
</script>
<style lang = "less" scoped>
// 页面整体高度
.home-container {
    height: 100%;
}

// 头部
.el-header {
    display: flex;
    color: #fff;
    width: 100%;

    align-items: center;
    background-color: #373d41;
    justify-content: space-between;

    div {
        display: flex;
        align-items: center;

        span {
            margin-left: 10px
        }
    }
}

// 侧边栏
.el-aside {
    background-color: #333744;
}

// 主体区域
.el-main {
    // height: 90vh;
    height: calc(100vh - 60px);
    overflow: auto;
    background-color: #eaedf1;
}
</style>
